<template>
	<div>
		<div class="beh-wrap">
			<a-form-model-item label="">
				<a-range-picker
					class="date-range-leng"
					@change="timeChange"
					v-model="value._timeRange"
					:disabled-date="disabledDate"
					format="YYYY-MM-DD HH:mm:ss"
					show-time
					:allowClear="false"
				/>
			</a-form-model-item>
			<a-form-model-item label="">
				<a-select v-model="value.include" class="select-leng-s" @select="includeSelect">
					<a-select-option value="contain">做过</a-select-option>
					<a-select-option value="notContain">未做过</a-select-option>
				</a-select>
			</a-form-model-item>
		</div>
		<div class="beh-wrap">
			<a-form-model-item label="">
				<a-select
					v-model="value.eventAlias"
					class="select-leng-l"
					@select="eventChange"
					show-search
				>
					<a-select-opt-group v-for="group in events" :key="group.groupName">
						<span slot="label">—{{ group.groupName }}—</span>
						<a-select-option
							:title="ev.eventAlias"
							:value="ev.eventAlias"
							v-for="(ev, j) in group.events"
							:key="j"
							:label="ev"
						>
							{{ ev.eventAlias }}
						</a-select-option>
					</a-select-opt-group>
				</a-select>
			</a-form-model-item>
			<template v-if="value.include !== 'notContain'">
				<a-form-model-item label="">
					<a-cascader
						v-model="value.eventAttr._aggregator"
						:default-value="selectedOptions"
						class="mul-select-leng"
						placeholder=""
						:field-names="{
							label: 'aggregatorAlias',
							value: 'aggregatorCode',
							children: 'analysis'
						}"
						:options="cascaderOptions"
						@change="cascaderChange"
						@blur="cascaderBlur"
						:allowClear="false"
					/>
				</a-form-model-item>
				<a-form-model-item label="">
					<a-select v-model="value.functionAlias" class="select-leng-s" @change="funChange">
						<a-select-option
							:title="fun.functionAlias"
							:value="fun.functionCode"
							v-for="fun in functions"
							:key="fun.functionCode"
							:label="fun"
						>
							{{ fun.functionAlias }}
						</a-select-option>
					</a-select>
				</a-form-model-item>
				<template v-if="hideInput">
					<template v-if="value.functionCode === 'between'">
						<a-form-model-item label="">
							<a-input
								v-model="value._params1"
								class="input-leng-s"
								@blur="params1Blur(value._params1)"
							/>
						</a-form-model-item>
						<a-form-model-item label="">
							<span class="zhi">至</span>
							<a-input
								v-model="value._params2"
								class="input-leng-s"
								@blur="params2Blur(value._params2)"
							/>
						</a-form-model-item>
					</template>
					<template v-else>
						<a-form-model-item label="">
							<a-input
								v-model="value._params"
								class="input-leng-l"
								@blur="paramsBlur(value._params)"
							/>
						</a-form-model-item>
					</template>
				</template>
			</template>

			<a-form-model-item v-if="value.eventAlias">
				<span @click="addProperty" class="add-btn">
					<a-icon type="plus-circle" />
					添加属性
				</span>
			</a-form-model-item>
		</div>
		<div class="item-wrap">
			<Logic v-model="value.filter.relation" v-if="relationShow" />
			<!-- <div class="logic-wrap" v-else></div> -->
			<div class="item-content">
				<div class="content" v-for="(condition, i) in value.filter.conditions" :key="condition.id">
					<div class="property-content">
						<UserArttr
							arttrType="event"
							:eventCode="value.eventCode"
							v-model="value.filter.conditions[i]"
						/>
					</div>
					<div class="del" @click="delProperty(i)">
						<a-icon type="close" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
import Logic from '../Logic.vue'
import UserArttr from './UserArttr.vue'
import { UserProperty } from './model'
import { getEvents, getEventProperties, getUserFunction } from '@/api/userGroup'
const functionAarry: Array<any> = ['isSet', 'notSet', 'notEmpty', 'isEmpty'] //隐藏输入框的code
@Component({
	name: 'UserBehavior',
	components: {
		Logic,
		UserArttr
	}
})
export default class UserBehavior extends Vue {
	@Prop() private value!: any
	get relationShow() {
		return this.value.filter.conditions.length > 1
	}
	events: Array<any> = []
	functions: Array<any> = []
	attrValues: Array<any> = []
	cascaderOptions: Array<any> = []

	dataType = ""
	selectedOptions: Array<any> = [{}, {}]
	mounted() {
		this.getEventList()
		this.cascaderBlur()

		//获取list列表
		if (this.value) {
			this.getEventPropertiyList(this.value.eventCode)
		}
		this.selectedOptions[0] = this.value.eventAttr.attrCode
		this.selectedOptions[1] = this.value.aggregatorCode
	}
	timeChange(e: any) {
		const [from, to] = e
		this.value.fromDate = this.$moment(from).format('YYYY-MM-DD')
		this.value.toDate = this.$moment(to).format('YYYY-MM-DD')
	}
	delProperty(index: number) {
		this.value.filter.conditions.splice(index, 1)
	}
	addProperty() {
		const conditions: UserProperty[] = this.value.filter.conditions
		if (conditions.length > 0 && !conditions[conditions.length - 1].functionCode) {
			this.$notify.warning({
				message: '请先填写完整已添加的属性'
			})
			return
		}
		const property = new UserProperty()
		conditions.push(property)
	}

	includeSelect() {
		//清空后的元素
		this.value.eventAttr.attrCode = ''
		this.value.eventAttr.attrName = ''
		this.value.aggregatorCode = ''
		this.value.aggregatorAlias = ''
		this.value.eventAttr._aggregator = []
		this.value.functionAlias = ''
		this.value._params = ''
		this.value._params1 = ''
		this.value._params2 = ''
	}

	eventChange(e: any, option: any) {
		const { componentOptions } = option
		let eventCode = componentOptions?.propsData?.label.eventCode //可能获取不到为undefined
		if (eventCode === undefined) eventCode = ''
		this.value.eventCode = eventCode
		//清空后的元素
		this.value.eventAttr._aggregator = []
		this.value.functionAlias = ''
		this.value.functionCode = ''
		this.value._params = ''
		this.value._params1 = ''
		this.value._params2 = ''
		this.getEventPropertiyList(eventCode)
	}
	disabledDate(current: any) {
		return current && current > this.$moment().endOf('day')
	}

	cascaderChange(selecteValue: Array<any>, selectedOptions: Array<any>) {
		this.value.eventAttr.attrCode = selectedOptions[0].aggregatorCode
		this.value.eventAttr.attrName = selectedOptions[0].aggregatorAlias
		this.value.aggregatorAlias = selectedOptions[1].aggregatorAlias
		this.value.aggregatorCode = selectedOptions[1].aggregatorCode

		this.value.functionAlias = ''
		this.value._params = ''
		this.value._params1 = ''
		this.value._params2 = ''

		this.dataType = selectedOptions[0].dataType
		this.getFunctionList()
	}

	@Watch('dataType')
	private dataTypeRequest() {
		this.getFunctionList()
	}

	get hideInput() {
		return !functionAarry.includes(this.value.functionCode)
	}

	cascaderBlur() {
		this.$nextTick(() => {
			let sapn: any = document.querySelector('.select-leng-l .ant-cascader-picker-label')
			sapn && sapn.setAttribute('title', sapn.innerText)
		})
	}
	displayRender(obj: { labels: Array<any> }) {
		return obj.labels[obj.labels.length - 1]
	}
	funChange(e: any, option: any) {
		const { componentOptions } = option
		let functionCode = componentOptions?.propsData?.label.functionCode //可能获取不到为undefined
		this.value.functionCode = functionCode
		this.value._params = ''
		this.value._params1 = ''
		this.value._params2 = ''
	}
	paramsBlur(val: string) {
		this.value.params = [val]
	}
	params1Blur(val: string) {
		this.value.params[0] = val
	}
	params2Blur(val: string) {
		if (this.value.params[0] === undefined) {
			this.value.params[0] = ''
		}
		this.value.params[1] = val
	}
	/**
	 * 事件接口
	 */
	getEventList() {
		const projectId: any = localStorage.getItem('productId')
		getEvents(projectId)
			.then(res => {
				const { data } = res
				this.events = data
			})
			.catch(e => {
				throw e
			})
	}
	/**
	 * 等号等表达式连接符接口
	 */
	getFunctionList() {
		getUserFunction(this.dataType).then(res => {
			const { data } = res
			this.functions = data
		})
	}

	/***
	 * 根据事件获取属性
	 */
	getEventPropertiyList(eventCode: string | number) {
		// eslint-disable-next-line @typescript-eslint/no-this-alias
		let _this =this
		const projectId = localStorage.getItem('productId') || ''
		getEventProperties(projectId, eventCode).then(res => {
			const { data } = res
			data.forEach((item: any) => {
				item.aggregatorCode = item.attrCode
				item.aggregatorAlias = item.attrName
			})
			_this.cascaderOptions = data

			if (_this.selectedOptions[0]) {
				for (let i = 0; i < data.length; i++) {
					if (data[i].aggregatorCode === _this.selectedOptions[0]) {
						this.dataType = data[i].dataType
					}
				}
			}

		})
	}
}
</script>

<style lang="scss" scoped>
.beh-wrap {
	display: flex;
	& > .ant-form-item {
		margin-left: 4px;
	}
	.ant-form-item {
		margin-bottom: 4px;
	}
}
.logic-wrap {
	width: 40px;
}
.item-wrap {
	display: flex;
	.item-content {
		flex: 1;
	}
	.content {
		padding-top: 4px;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		.del {
			width: 50px;
			text-align: center;
			cursor: pointer;
		}
	}
}
.zhi {
	display: inline-block;
	margin-right: 4px;
}
</style>
